<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/element-ui/index.css"/>
    <link rel="stylesheet" href="../styles/icon/iconfont.css"/>

<!--    &lt;!&ndash; 引入样式 &ndash;&gt;-->
<!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
<!--    &lt;!&ndash; 引入组件库 &ndash;&gt;-->
<!--    <script src="https://unpkg.com/element-ui/lib/index.js"></script>-->
    <style>
        .el-header {
            background-color: #B3C0D1;
            color: #333;
            line-height: 60px;
        }

        .el-aside {
            color: #333;
        }
    </style>
</head>
<body>

<div id="app">


    <el-container style="height: 500px; border: 1px solid #eee">
        <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
            <el-menu :default-openeds="['2']">
                <el-submenu index="2">
                    <template slot="title"><i class="el-icon-menu"></i>博客系统</template>
                    <el-menu-item-group>
                        <template slot="title">分类表</template>
                        <el-menu-item index="2-1" @click="categoryFindAll">查询所有分类</el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group title="博客表">
                        <el-menu-item index="2-3" @click="blogFindAll">查询所有博客</el-menu-item>
                    </el-menu-item-group>
                </el-submenu>

            </el-menu>
        </el-aside>

        <el-container>
            <el-header style="text-align: right; font-size: 12px">
                <el-dropdown @command="exit">
                    <i class="el-icon-setting" style="margin-right: 15px"></i>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item v-model="loginInfo" :command="loginInfo" >{{loginInfo}}</el-dropdown-item>
                        <el-dropdown-item v-model="exitInfo" :command="exitInfo" >{{exitInfo}}</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
                <span>王小虎</span>
            </el-header>



            <el-main
                    id="categoryTable"
                    style="display: none">
                <el-row>
                    <el-button type="success" round @click="beforeAdd">新增</el-button>
                </el-row>
                <template>
                    <el-table
                            :data="categories"
                            border
                            style="width: 100%">
                        <el-table-column
                                prop="categoryId"
                                label="分类ID"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="categoryName"
                                label="分类名"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                label="功能">
                            <template slot-scope="scope">
                            <el-row>
                                <el-button type="primary" icon="el-icon-edit" circle @click="beforeUpdate(scope.$index, scope.row)"></el-button>
                                <el-button type="danger" icon="el-icon-delete" circle @click="beforeDelete(scope.$index, scope.row)"></el-button>
                            </el-row>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>

                <el-dialog
                        title="新增分类"
                        :visible.sync="addDialogVisible"
                        width="30%"
                        :before-close="handleClose">

                          <el-form  label-width="80px" >
                    <el-form-item label="分类名">
                        <el-input v-model="form.categoryName"></el-input>
                    </el-form-item>
                     </el-form>

                    <span slot="footer" class="dialog-footer">
                    <el-button @click="addDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="categoryAdd">确 定</el-button>
                  </span>
                 </el-dialog>

                <el-dialog
                        title="修改分类"
                        :visible.sync="updateDialogVisible"
                        width="30%"
                        :before-close="handleClose">
                    <span>
                          <el-form   label-width="80px" >
                    <el-form-item label="分类名">
                        <el-input v-model="form.categoryName"></el-input>
                    </el-form-item>
                     </el-form>
                    </span>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="updateDialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="categoryUpdate">确 定</el-button>
                  </span>
                </el-dialog>

            </el-main>
        </el-container>
    </el-container>


</div>


</body>


<script src="../plugins/vue/vue.js"></script>
<script src="../plugins/element-ui/index.js"></script>
<script src="../plugins/axios/axios.min.js"></script>
<script src="../js/request.js"></script>
<script src="../api/category.js"></script>

<script>
    new Vue({
        el:"#app",
        data(){
            return{
                loginInfo:"登录",
                exitInfo:"退出登录",
                categories:[],
                form:[{
                    categoryId:'',
                    categoryName:''
                }],
                addDialogVisible: false,
                updateDialogVisible:false,
            }
        },
        mounted(){
            this.categoryFindAll();
        },
        methods:{

            categoryAdd(){
                let token=localStorage.getItem("token");
                categoryAddApi(this.form,token).then(res=>{
                    if (res.data.flag){
                        this.addDialogVisible=false;
                        this.categoryFindAll();
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                    }
                    else {
                        this.$message.error('添加失败');
                    }
                })
            },

            categoryDelete(row){
                let token=localStorage.getItem("token");
                categoryDeleteApi(row.categoryId,token).then(res=>{
                    if (res.data.flag){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.categoryFindAll();
                    }else {
                        this.$message.error('删除失败');
                    }
                })
            },
            categoryUpdate(){
                let token=localStorage.getItem("token");
                categoryUpdateApi(this.form,token).then(res=>{
                    console.log(res);
                    if (res.data.flag){
                        this.updateDialogVisible=false;
                        this.categoryFindAll();
                        this.$message({
                            message: '修改成功',
                            type: 'success'
                        });
                    }
                    else {
                        this.$message.error('修改失败');
                    }
                })
            },
            categoryFindAll(){
                categoryTable.style.display='block';
                categoryFindAllApi().then(res=>{
                    // console.log(res);
                    this.categories=res.data.data;
                })
            },
            beforeAdd(){
                this.form=[];
                this.addDialogVisible = true;
            },
            beforeDelete(index,row){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(row);
                    this.categoryDelete(row);

                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            beforeUpdate(index,row){
                this.form=row;
                this.updateDialogVisible=true;
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            exit(item){
                // console.log(item);
                // console.log(localStorage.getItem("token"))
                if (item=="退出登录"){
                    localStorage.removeItem("token");
                    console.log(localStorage.getItem("token"))
                }
                if(item=="登录"){
                    location.href="http://localhost:8080/pages/bloghtml/admin.html"
                }

            },
            blogFindAll(){
                location.href="http://localhost:8080/pages/bloghtml/blogs.html"
            }
        }
    })
</script>

</html>